<template>
  <div class="caseComp">
    <div class="caseCompTitle">编辑被投诉单位</div>
    <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="单位名称" prop="complaintCompanyName">
        <el-input
          v-model="info.complaintCompanyName"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否工程项目" prop="peopleCount">
        <el-select
          clearable
          v-model="info.isComplaintProject"
          style="width: 73px"
        >
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
        -
        <el-input
          clearable
          placeholder="请输入"
          :disabled="info.isComplaintProject == '0' ? true : false"
          v-model="info.complaintProjectName"
          class="caseCompListSelect"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位性质" prop="companyType">
        <el-input
          v-model="info.companyType"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目性质" prop="projectType">
        <el-input
          v-model="info.projectType"
          clearable=""
          :disabled="info.isComplaintProject == '0' ? true : false"
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="行业类型" prop="peopleCount">
        <el-cascader
          ref="industry"
          v-model="industry"
          :options="industryOptionsNC"
          @change="getIndustryId"
          :props="{ checkStrictly: true, value: 'label' }"
          :append-to-body="false"
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="单位电话" prop="companyTel">
        <el-input
          v-model="info.companyTel"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
      <el-form-item label="单位地址" prop="companyAddress">
        <el-input
          v-model="info.companyAddress"
          clearable=""
          placeholder="请输入"
          class="caseCompTitleInput"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="caseCompBtn">
      <el-button
        type="primary"
        v-sdc
        :loading="isLoading"
        class="commonBut saveBtn"
        @click="save"
        >保存</el-button
      >
      <el-button type="default" v-sdc class="commonBut" @click="finish"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  name: 'caseDepartment',
  props: {
    childData: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    const checkPhoneOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      isLoading: false,
      industry: [], //行业
      info: {
        id: '',
        complaintCompanyName: '', //单位名称
        isComplaintProject: '', //是否工程项目 1是  0 否
        complaintProjectName: '', //投诉项目
        companyType: '', //单位性质
        projectType: '', //项目性质
        industry: '', //行业类型
        companyTel: '', //单位电话
        companyAddress: '', //单位地址
      },
      rules: {
        companyTel: [{ validator: checkPhoneOrTel, trigger: 'blur' }],
      },
      industryOptionsNC: [],
    }
  },
  mounted() {
    this.getIndustry()
    const {
      id,
      complaintCompanyName,
      isComplaintProject,
      complaintProjectName,
      companyType,
      projectType,
      industry,
      companyTel,
      companyAddress,
    } = this.childData
    this.industry = industry
    this.info = {
      id,
      complaintCompanyName,
      isComplaintProject,
      complaintProjectName,
      companyType,
      projectType,
      industry,
      companyTel,
      companyAddress,
    }
  },
  watch: {
    curisComplaintProject(val) {
      if (val == 0) {
        this.info.projectType = ''
        this.info.complaintProjectName = ''
      }
    },
  },
  computed: {
    curisComplaintProject() {
      return this.info.isComplaintProject
    },
  },
  methods: {
    //获取选中的行业最后一级id
    getIndustryId() {
      var industry = this.industry[this.industry.length - 1]
      this.info.industry = industry
    },
    /**
     * @name: 获取行业类型列表
     * @Author: 471826078@qq.com
     */
    getIndustry() {
      this.axios({
        method: 'post',
        url: 'api-bs/industry/base/detailbyindustryid',
      })
        .then((res) => {
          this.industryOptionsNC = res.data.result
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取行业数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @name: 保存修改
     * @Author: 471826078@qq.com
     */
    save() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isLoading = true
          const {
            id,
            complaintCompanyName,
            isComplaintProject,
            complaintProjectName,
            companyType,
            projectType,
            industry,
            companyTel,
            companyAddress,
          } = this.info
          let params = {
            id,
            complaintCompanyName,
            isComplaintProject,
            complaintProjectName,
            companyType,
            projectType,
            industry,
            companyTel,
            companyAddress,
          }
          this.axios
            .post('api-r/rbp/modifyRightsAppealCompany', params)
            .then((res) => {
              if (!res.data.hasError) {
                this.$message({
                  type: 'success',
                  message: res.data.msg,
                })
                this.isLoading = false
                this.finish(1)
              } else {
                this.$message({
                  type: 'warning',
                  message: res.data.errorMsg,
                })
                this.isLoading = false
              }
            })
        }
      })
    },
    finish(index) {
      this.$emit('callback', { success: index == 1 ? true : false })
    },
  },
}
</script>
<style lang="less" scoped>
.caseComp {
  border: 1px solid #dcdfe6;
  background-color: #f8f9fb;
  padding: 15px;
  &Title {
    color: #009588;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 12px;
  }
  &List {
    line-height: 36px;
    height: 36px;
    font-size: 14px;
    color: #444;
    margin-bottom: 12px;
    &Title {
      display: inline-block;
      width: 85px;
      text-align: right;
    }
    &Input {
      width: calc(100% - 95px);
    }

    .input {
      width: calc(100% - 170px);
    }
  }
  &Btn {
    text-align: center;
    margin: 24px 0 10px;
    .el-button {
      width: 120px;
    }
  }
}
.caseCompListInput {
  width: calc(100%);
}
.caseCompListSelect {
  width: calc(100% - 95px);
}
</style>
